<template>
	<view class="food-app">
		<view class="food">
			<view class="banner">
				<image class="ban-img" :src="foodList.picture" alt="">
			</view>
			<view class="top">
				<text class="title">{{foodList.name}}</text>
				<view class="like"><text>d</text><text>l</text></view>
			</view>
			<view class="middle">
				<text class="middle-text">浏览{{foodList.hits}}人</text>
				<text class="middle-text">点赞{{foodList.loves}}人</text>
				<text class="middle-text">收藏{{foodList.favorites}}人</text>
			</view>
			<text class="summary">{{foodList.intro}}</text>
			<view class="food-item">
				<text class="item-title">
					<text class="title">食材</text>
					<text class="item-count">{{ foodList.materials.length}}种</text>
				</text>
				<view class="food-mater">
					<view class="item" v-for="(m,i) in foodList.materials" @click="goSearch(m.materialName)">
						<text class="mater">{{m.materialName}}</text>
						<text class="mater">{{m.amount}}</text>
						<text class="mater">></text>
					</view>
				</view>
			</view>
			<view class="cooker-item">
				<text class="item-title">
					<text class="title">烹饪步骤</text>
					<text class="item-count">共{{ foodList.steps.length}}种</text>
				</text>
				<view class="cooker-step">
					<view class="step" v-for="(s,i) in foodList.steps">
						<text class="step-count">步骤{{i+1}}</text>
						<view class="step-img">
							<image class="img-item" :src='s.picture' />
						</view>
						<text class="step-desc">
							{{s.description}}
						</text>
					</view>
				</view>
			</view>
			<view class="tips">
				<text class="item-title">小贴士</text>
				<view v-if="foodList.tips !=''">{{foodList.tips}}</view>
				<view v-if="foodList.tips ==''">无</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				foodList: []
			}
		},
		methods: {

			getData() {
				uni.request({
					url: `https://appfly.cn/api/cookbookCommon/foodDetail?foodId=${this.id}`,

					success: (res) => {
						this.foodList = res.data.data
						// console.log(res.data);//输出
						console.log(this.foodList);
					}
				});
			},
			
			goSearch(name){
				uni.navigateTo({
				     url:`/pages/foodSearch/foodSearch?name=${name}`
				 })
			}

		},
		onLoad(options) {
			this.id = options.id;
			this.getData()
		}
	}
</script>

<style lang="scss">
	.food {
		padding: 10px 12px;
		width: 93vw;

		.banner {
			width: 93vw;
			height: 200px;
			border-radius: 8px;

			.ban-img {
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
		}

		.top {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			
			.title{
				font-weight: 700;
				font-size: 20px
			}

			.like {
				display: flex;
			}
		}

		.middle{
			color: #999;
			margin: 10px 0;
			display: flex;
			justify-content: flex-start;
			.middle-text{
				flex: 0 0 30%;
			}
		}
		
		.summary {
			width: 93vw;
			font-size: 13px;
			color: #555;
		}

		.food-item {
			margin-top: 20px;
			color: #666;

			.food-mater {
				margin-top: 5px;

				.item {
					display: flex;
					justify-content: flex-start;
					height: 30px;
					padding: 10px 5px;
					line-height: 30px;
					border-bottom: 1px dotted #999;

					.mater {
						flex: 0 0 45%;
					}
				}
			}
		}

		.cooker-item {
			margin-top: 20px;
			.cooker-step {
				margin-top: 10px;
				.step {
					margin-bottom: 20px;
					.step-count{
						font-weight: 700;
						font-size: 18px;
					}
					.step-img {
						width: 93vw;
						height: 200px;
						border-radius: 8px;
						margin: 10px 0;

						.img-item {
							width: 100%;
							height: 100%;
							border-radius: 8px;
						}

					}
					.step-desc{
						color: #666;
						margin: 10px 0;
					}
				}
			}
		}
	
		.item-title{
			font-size: 20px;
			font-weight: 700;
			.item-count{
				font-size: 16px;
				padding-left: 10px;
				color:#888
			}
		}
	}
</style>
